<template>
  <!-- 开局选男女 -->

  <div class="welcome">
    <img src="/image/2021.png" alt="" srcset="" />
    <img class="look" src="/image/look.png" alt="" srcset="" />
    <p>看看发生了什么?</p>
    <img class="start" src="/image/start.png" alt="" srcset="" @click="start" />
    <br />
    <a class="tip" href="https://gitee.com/zybd/review-2021"
      >姜汁撞了鲜奶腰制作
    </a>
  </div>

  <van-popup
    v-model:show="showChooseGender"
    @closed="closeAlert"
    round
    :close-on-click-overlay="false"
  >
    <div class="chooseGender">
      <h1>请选择你的人物</h1>
      <div class="player">
        <div
          class="man"
          @click="checkPlayer('man')"
          :class="{ check: player === 'man' }"
        ></div>
        <div
          class="woman"
          @click="checkPlayer('woman')"
          :class="{ check: player === 'woman' }"
        ></div>
      </div>

      <p @click="closeChooseGender()">确认</p>
    </div>
  </van-popup>
</template>

<script>
import { Popup } from "vant";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    [Popup.name]: Popup,
  },
  setup() {
    const router = useRouter();

    const showChooseGender = ref(true);
    // 选择的角色
    const player = ref("");
    const checkPlayer = (val) => {
      localStorage.setItem("playerGender", val);
      player.value = val;
    };
    const closeChooseGender = () => {
      if (player.value) {
        showChooseGender.value = false;
      }
    };

    const start = () => {
      showChooseGender.value = false;
      router.push("/game");
    };
    return {
      player,
      showChooseGender,
      checkPlayer,
      closeChooseGender,
      start,
    };
  },
});
</script>

<style lang="scss" scoped>
.welcome {
  text-align: center;
  .look {
    animation: look 1s ease infinite;
  }
  p {
    font-size: 32px;
  }
  .start {
    margin-top: 30px;
  }
  .tip {
    position: fixed;
    bottom: 20px;
    width: 100%;
    text-align: center;
    left: 0px;
  }
}

@keyframes look {
  0%,
  100% {
    -webkit-transform: rotateZ(0);
  }
  50% {
    -webkit-transform: rotateZ(10deg);
  }
}

.chooseGender {
  width: 300px;
  // height: 350px;
  text-align: center;
  .player {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .woman {
      width: 55px;
      height: 65px;
      background: url("/image/player-woman.png") no-repeat -395px 0px;
      &.check {
        background-position: -450px -65px;
      }
    }
    .man {
      width: 55px;
      height: 65px;
      background: url("/image/player.png") no-repeat -395px 0px;
      transform: scaleX(-1);
      &.check {
        background-position: -450px -65px;
      }
    }
  }
}
</style>
